<template>
    <Particles />
    <header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800">
        <nav class="py-4 container-custom">
            <div class="flex items-center justify-between">
                <!-- Logo区域 -->
                <div class="flex items-center">
                    <router-link to="/" class="flex items-center space-x-3">
                        <!-- <img v-if="!isDark" src="../assets/home_logo.jpeg" alt="Logo" class="w-auto h-10" />
                        <img v-else src="../assets/logo.png" alt="Logo" class="w-auto h-10" /> -->
                        <span class="text-2xl font-bold text-gray-900 dark:text-white">西 旺 数 字 科 技</span>
                    </router-link>
                </div>

                <!-- 移动端菜单按钮 -->
                <button
                    @click="isMenuOpen = !isMenuOpen"
                    class="p-2 rounded-lg md:hidden hover:bg-gray-100 dark:hover:bg-gray-700">
                    <svg
                        class="w-6 h-6 text-gray-600 dark:text-gray-300"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path
                            v-if="!isMenuOpen"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                        <path
                            v-else
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>

                <!-- 桌面端导航菜单 -->
                <div class="items-center hidden space-x-8 md:flex">
                    <router-link
                        v-for="item in menuItems"
                        :key="item.path"
                        :to="item.path"
                        class="text-gray-600 transition-colors hover:text-primary dark:text-gray-300 dark:hover:text-white">
                        {{ item.name }}
                    </router-link>

                    <!-- 深色模式切换按钮 -->
                    <button @click="toggleDarkMode" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                        <span v-if="isDark" class="text-yellow-500">🌙</span>
                        <span v-else class="text-yellow-500">☀️</span>
                    </button>
                </div>
            </div>

            <!-- 移动端导航菜单 -->
            <div v-show="isMenuOpen" class="mt-4 space-y-2 transition-all duration-300 md:hidden">
                <router-link
                    v-for="item in menuItems"
                    :key="item.path"
                    :to="item.path"
                    class="block px-4 py-2 text-gray-600 rounded-lg hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
                    @click="isMenuOpen = false">
                    {{ item.name }}
                </router-link>

                <!-- 移动端深色模式切换按钮 -->
                <button
                    @click="toggleDarkMode"
                    class="w-full px-4 py-2 text-left text-gray-600 rounded-lg hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
                    <span v-if="isDark">🌙 深色模式</span>
                    <span v-else>☀️ 浅色模式</span>
                </button>
            </div>
        </nav>
    </header>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDarkMode } from "../composables/useDarkMode";

const { isDark, toggleDarkMode } = useDarkMode();
const isMenuOpen = ref(false);

const menuItems = [
    { name: "首页", path: "/" },
    { name: "产品中心", path: "/products" },
    { name: "关于我们", path: "/about" },
    { name: "联系我们", path: "/contact" },
];
</script>
